<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>购物车</title>
	<link rel="stylesheet" href="../css/commodity.css">
	<link rel="stylesheet" href="../css/demo.css">
	<link rel="stylesheet"  href="../css/component.css">
	<link rel="stylesheet" href="../css/content.css">
	<link rel="stylesheet" href="../css/cart.css">
	<link rel="stylesheet" href="../css/shoppingCart.css">
</head>
<body>
	<div class="wrap">
		<div class="logo">
		<!--头部-->
			<a href=""><img src="../images/dota2_logn.png" alt="恋尚优饰品交易中心"></a>
			<div class="login">
				<c:if test="${not empty userInfo }">
						<div class="user">
							<div class="user_img">
								<img src="../images/user.png" alt="" />
							</div>
							<div class="user_name" onmouseover="$('#user_name_none').css('display', 'block');"
								onmouseout="$('#user_name_none').css('display', 'none');">
								<a href="" id="user_name_a">
									<span>${userInfo. uName}</span> <b class="caret"></b>
								</a>
								<ul id="user_name_none">
									<li class="user_home"><a
										href="/index.php/home/User/my.html">个人主页</a></li>
									<li class="out_login"><a href="javascript:void(0)"
										id="quit" onclick="loginOut()">退出登录</a></li>
								</ul>
							</div>
						</div>
					</c:if>
					<c:if test="${ empty userInfo }">
					<!-- start -->
					<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
						<button type="button" id="login_b" class="login_box">登录</button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-1">
									<span class="icon icon-close">×</span>
									<h2>会员登录</h2>
									<form action="" method="post" id="denglu">
										<p>
											<label>用户名：</label><input placeholder="请输入用户名" name="uName"
												id="login_name" type="text"><span></span>
										</p>
										<p>
											<label>密码：</label><input placeholder="请输入登录密码" name="uPwd"
												id="login_pass" value="" type="password"><span></span>
										</p>
										<p>
											<label>验证码：</label><input id="code" placeholder="请输入验证码"
												type="text"> <img src="../front/valiCodeImg/login"
												alt="验证码" id="code_img"
												onclick="this.src='../front/valiCodeImg/login?'+Math.random()"
												style="margin-left: 40px; width: 150px; height: 45px; cursor: pointer;"><span
												id="code_info"
												style="font-size: 15px; margin-left: 20px; color: red"></span>
										</p>
										<p>
											<input value="登录" id="login_t" class="login_btn"
												type="button">
										</p>
										<div>
											<a href="">忘记密码?</a>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
					<div
						class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
						<button type="button" id="login_b" class="register">注册</button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-2">
									<span class="icon icon-close">×</span>
									<h2>会员注册</h2>
									<form id="zuce">
										<p>
											<label class="p1">用户名：</label> <input placeholder="请输入用户名"
												class="reg reg_name" name="uName" type="text"> <span>*请输入5到20位字符的账户</span>
										</p>

										<p>
											<label class="p1">密码：</label> <input placeholder="请输入密码"
												class="reg reg_pwd" name="uPwd" type="password"> <span>*请输入7到20位字符的密码，必须包含数字、字母</span>
										</p>
										<p>
											<label class="p1">确认密码：</label> <input placeholder="确认密码"
												class="reg reg_reUpwd" name="reuPwd" type="password">
											<span>*请输入7到20位字符的密码，必须包含数字、字母</span>
										</p>
										<p>
											<label class="p1">邮箱：</label> <input placeholder="请输入邮箱"
												class="reg reg_email" name="uEmail" type="text"> <span>*请输入正确的邮箱</span>
										</p>

										<p>
											<label class="p1">手机号码：</label> <input placeholder="请输入手机号码"
												class="reg reg_phone" name="uPhone" type="text"> <span>*请输入正确的手机号码以保证找回密码</span>
										</p>

										<!-- <p>
												<label class="p1">密钥：</label>
												<input placeholder="请输入密钥" class="reg" name="密钥" type="text">
												<span>*请输入5到20位字符密钥可以是数字、字母、一段话（用于密码找回，请牢记）</span>
											</p> -->

										<p>
											<label class="p1">验证码：</label> <input id="code"
												placeholder="请输入验证码" style="width: 180px" class="reg"
												name="code" type="text"> <img
												src="../front/valiCodeImg/register" alt="验证码"
												style="margin-left: 25px; cursor: pointer;"
												onclick="this.src='../front/valiCodeImg/register?'+Math.random()"
												id="reg_img"> <span class="reg_code"
												style="line-height: 45px"></span>
										</p>
										<p>
											<input value="提交注册" id="login_t" class="zuce_btn"
												type="button">
										</p>
									</form>
								</div>
							</div>
						</div>
					</div>
					</c:if>
				</div>
		</div>
		<!--头部end-->
		<div class="bodyer">
			<div class="container">
			<!--主体内容-->
			<div class="site">
			<!-- 位置 -->
				<div class="home_icon">
						<a href=""><img src="../images/home_icon.png" alt=""></a>
					</div>
					<div class="triangle"></div>
					<div class="site_sp">
						<a href="">饰品市场</a>
					</div>
					<div class="triangle1"></div>
					<div class="site_ss">
						购物车
					</div>
			<!-- 位置end -->
			</div>
			<div class="cart">
				<div class="cart_bg">
						<h3>我的购物车 </h3>
						<h4>SHOPPING CART </h4>
						<div class="step_pull">
							<div class="step1">
								<div class="num curr">1</div>
								<div class="txt curr1">购物车订单</div>
							</div>
							<div class="step_line_curr"></div>
							<div class="step_line2"></div>
							<div class="step2">
								<div class="num">2</div>
								<div class="txt">订单支付</div>
							</div>
							<div class="step_line"></div>
							<div class="step_line2"></div>
							<div class="step2">
								<div class="num">3</div>
								<div class="txt">商家发货</div>
							</div>
							<div class="step_line"></div>
							<div class="step_line2"></div>
							<div class="step2">
								<div class="num">4</div>
								<div class="txt">交易成功</div>
							</div>
						</div>
					</div>
					<!-- 购物车内容 -->
					<div class="catbox">
					
					<c:if test="${not empty shoppingList }">
					
						<table id="cartTable">
							<thead>
								<tr>
									<th>
										<label class="pick"><input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label>
									</th>
									<th>商品名</th>
									<th>单价</th>
									<th>数量</th>
									<th>小计</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							<c:forEach items="${shoppingList}" varStatus="i" var="item">
									<tr  id="${item.gId }">
										<td class="checkbox"><input class="check-one check" type="checkbox" value="${item.gId }" id="1" name="${item.gId }"/></td>
											<td class="goods" id="cart_td">
											<img src="${item.gMainImage }" alt=""/>
											<span>${item.gTitle }-${item.s_property_data }</span>
										</td>
										<td class="price">${item.gPrice/100}</td>
											<td class="count">
											<input class="count-input" type="text" value="${item.s_number }" disabled="disabled"/>
										</td>
										<td class="subtotal"></td>
										<td class="operation">
											<span class="delete">删除</span>
										</td>
								</tr>
							</c:forEach>
							</tbody>
						</table>
						<div class="foot" id="foot">
							<label class="fl select-all">
								<input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选
							</label>
							<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
							<div class="fr closing" >结 算</div>
							<input type="hidden" id="cartTotalPrice" />
							<div class="fr total">
								合计：<span id="priceTotal">0.00</span><span>&nbsp;元</span>
							</div>
							<div class="fr selected" id="selected">
								已选商品<span id="selectedTotal">0</span>件
							</div>
						</div>
						</c:if>
							<c:if test="${empty shoppingList }">
							<div class='text_s'>你的购物车空空如也，赶快登陆把饰品带回家吧~</div>
							</c:if>
					</div>
									<!-- 购物车内容end -->
				
				<!-- 购物车内容 -->

				
			<!-- 购物车内容end -->
				

			</div>
		</div>
		<div class="footer">
			<div class="footer_container">
				<p>
					<a href="index.html">首页</a><b>|</b>
					<a href="">关于我们</a><b>|</b>
					<a href="">意见反馈</a><b>|</b>
					<a href="">商务合作</a>
				</p>
			</div>
		</div>
		<div class="nav">
			<div class="shopper">
				<a href="shopping">
					<span><img src="../images/shopper.png" alt=""></span>
					<div class="shopper_gw">购物车</div>
				</a>
					<div class="shopper_nums"></div>
				
				<!-- <a href="" id="shopper_bb_a">
					<div class="shopper_bb">我的背包</div>
				</a> -->
				<div class="shopper_most">
					<img src="../images/top.png" alt="">
				</div>
			</div>
		</div>
	</div>
	</div>
	<script type="text/javascript"  src="../js/jquery-1.js"></script>
	<script type="text/javascript"  src="../js/modernizr.js"></script>
	<script type="text/javascript"  src="../js/classie.js"></script>
	<script type="text/javascript"  src="../js/uiMorphingButton_fixed.js"></script>
	<script type="text/javascript"  src="../js/login.js"></script>
	<script type="text/javascript"  src="../js/loginregister.js"></script>
	<script type="text/javascript" src="../js/cart.js"></script>
		
<script>
var uId=${userInfo.uId}+"";
	$(".commodity_news_bar_ul li .commodity_news_list_show").click(function () {
		$(".commodity_news_list").show();
		$(".pinglun").hide();
	})
	$(".commodity_news_bar_ul li .pinglun_show").click(function () {
		$(".pinglun").show();
		$(".commodity_news_list").hide();
	})
	 $(".closing").click(function(){    
		$.get("../user/token/"+getCookieJsonData("FRONT_SESSION_KEY"),{},function(data){
			if(data.status==200){
				var id ="";
				 if(selectedTotal.innerHTML != 0){
			   	 obj = $(".check-one");
					
					for(k in obj){
					    if(obj[k].checked)
					        id+=obj[k].value+",";
					};
				 }
				if(id!=""){
					location.href="order?id="+id;
				}
			}else{
				alert("请先登录");
			}
		}) ;
	 });
	/* 	if(uId==""){
			alert("请先登录");
			return;
		}
	
	var id ="";
	 if(selectedTotal.innerHTML != 0){
   	 obj = $(".check-one");
		
		for(k in obj){
		    if(obj[k].checked)
		        id+=obj[k].value+",";
		};
	 }
	if(id!=""){
		location.href="order?id="+id;
	}
	 }); */
			//
		
    	/* for (var i = 0; i < tr.length; i++) {
        // 如果被选中，就删除相应的行
	        if (tr[i].getElementsByTagName('input')[0].checked) {
	            tr[i].parentNode.removeChild(tr[i]); // 删除相应节点
	            i--; //回退下标位置
	            // alert(tr.length);
	            if(tr.length == 0){
	                $("#foot").remove();
	                $(".catbox").remove();
	                var text = "<div class='catbox'><div class='text_s'>你的购物车怎么是空的？还不赶快把购物车填满~</div></div>";
	                $(".cart_bg").after(text);

	            }
	        }
	    } */
	/* */
   /*  }else{
    	alert('请选择商品！');
    } */

</script>
</body></html>